<div fxFlexFill class="turbine-selector" *ngIf="display">
  <header class="turbine-selector-header">
    <div class="form-right" *ngIf="multipleDevice">
      <i (click)="onFarmDeviceChecked(true)">全选</i>
      <i (click)="onFarmDeviceChecked(false)">全不选</i>
    </div>
    <b>选择{{deviceCategoryName}}</b>
    <span *ngFor="let farm of farms;let i=index" [ngClass]="{active:farm?.farmId==this?.selectedFarm?.farmId}" (click)="onFarmSelectedChange(farm)">
      {{farm?.farmName}}
    </span>
  </header>
  <section class="turbine-selector-group" *ngIf="displayGroupToolbar">
    分组展示
    <label>
      <input type="radio" value="0" name="group" (click)="onDeviceGroupCategorySelectedChange($event.target)" [checked]="deviceGroupCategory===0">{{deviceCategoryName}}</label>
    <label>
      <input type="radio" value="1" name="group" (click)="onDeviceGroupCategorySelectedChange($event.target)" [checked]="deviceGroupCategory===1">工期</label>
    <label>
      <input type="radio" value="2" name="group" (click)="onDeviceGroupCategorySelectedChange($event.target)" [checked]="deviceGroupCategory===2">线路</label>
    <label>
      <input type="radio" value="3" name="group" (click)="onDeviceGroupCategorySelectedChange($event.target)" [checked]="deviceGroupCategory===3">型号</label>
  </section>
  <section>
    <div class="turbine-selector-phase" *ngFor="let deviceGroupItem of deviceGroups">      
      <header class="selector-phase-title"  *ngIf="deviceGroupItem.title!='' || deviceGroups.length>1">
        <div class="form-right"  *ngIf="deviceGroups.length > 1 && multipleDevice">
          <i (click)="onGroupItemDeviceChecked(true,deviceGroupItem)">全选</i>
          <i (click)="onGroupItemDeviceChecked(false,deviceGroupItem)">全不选</i>
        </div>
        {{deviceGroupItem.title}}
      </header>
      <section class="selector-selector-main">
        <div class="phase-content">
          <div class="phase-content">
            <section class="bottom">
              <span *ngFor="let device of deviceGroupItem.devices" [ngClass]="{'active':device.isChecked}">
                <label>
                    <input type="checkbox" [checked]="device.isChecked" (click)="onDeviceChecked($event,device)"> {{device.deviceName}}
                </label>              
              </span>
            </section>
          </div>
        </div>
      </section>
    </div>
  </section>
  <small class="tooltip" [ngClass]="{active:choiceDeviceOver}">最多只能选择{{ choiceDeviceCount }}台设备</small>
  <small class="tooltip" [ngClass]="{active:choiceFarmOver}">只能选择同一电站的设备</small>
  <small class="tooltip" [ngClass]="{active:choiceModelOver}">只能选择同一型号的设备</small>
</div>